<template>
<div class="login">
  <el-card class="main-box" :body-style="{ padding: '0px',width:'75%' }">
  <div class="sign-in">
    <!-- 登录 -->
    <el-form
      class="form login-form clear-fix"
      ref="loginFormRef"
      :model="loginForm"
      :rules="loginRules"
    >
      <el-form-item label="用户名" prop="email">
        <el-input v-model="loginForm.loginName" type="text" placeholder="请输入用户名" ></el-input>
      </el-form-item>
      <el-form-item label="密&nbsp;&nbsp;&nbsp;码" prop="pass">
        <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-row gutter="10px" class="login_btn">
          <el-col :span="12">
            <el-button
              type="primary"
              class="form-btn submit-btn"
              @click="goLogin"
              v-if="!successMode"
            >
              提交
            </el-button>
            <el-button
              type="success"
              v-else
              class="form-btn"
            >
              登录成功
            </el-button>
          </el-col>
          <el-col :span="12">
            <el-button
              class="form-btn reset-btn"
              @click="resetForm()"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
  </el-card>
</div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { UserModule } from '@/store/modules/user'

interface loginData{
  loginName:string,
  password:string
}
@Options({})
export default class Login extends Vue {
  loginForm:loginData ={
    loginName: 'admin',
    password: 'admin'
  }

  public goLogin () :void{
    UserModule.Login(this.loginForm).then((resp) => {
      if (resp.success) {
        this.$router.push({ path: '/' })
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.login{
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  background-image: url("../assets/images/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: hidden;
  overflow-y: hidden;
}
.login_btn{
  justify-content: center;
}
.el-col-12{
  flex: 0 0 35%;
}
.reset-btn{
  margin-left: 50px;
}
.el-card__body{
  width: 100%;
}
.main-box{
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 350px;
  width: 500px;
}

</style>
